<template>
    <div>
        <div v-for="(item, index) in info" :key="index" class="card" @click="toGoodsDetail(item)">
            <div class="thumb">
                <img :src="item.goodsThumb ? item.goodsThumb : imgSrc[0]"/>
            </div>
            <div class="info">
                <div class="title">
                    <span v-if="item.goodsSale" class="tag">{{dict[item.goodsSale]}}</span>
                    <span class="name">{{item.goodsName}}</span>
                </div>
                <div class="reward">
                    赚 {{item.saleReward}}
                </div>
                <div class="price">
                    <span class="icon">￥</span>
                    <span class="num">{{item.beGroup === '0' ? item.originalPrice : item.originalGroupPrice}}</span>
                </div>
                <div class="sale">已售：{{item.salesNum}}件</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "GoodsListCard",
        props: {
            info: {
                type: Array || Object,
                default: []
            }
        },
        data(){
            return {
                dict: ['热门', '最新', '精品', '爆款', '推荐'],
            }
        },
        methods: {
            toGoodsDetail(obj) {
                this.$router.push({
                    path: "/goods/goodsDetail",
                    query: {
                        goodsId: obj.goodsId,
                        // inviteNum: 123456
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .all-goods {
        padding: 0 15px;
        margin-top: 8px;
        .card {
            display: flex;
            padding: 8px;
            margin-bottom: 8px;
            border-radius: 8px;
            background-color: #ffffff;

            .thumb {
                width: 100px;
                height: 100px;
                flex: 0 0 100px;
                overflow: hidden;
                object-fit: fill;

                img {
                    width: 100%;
                    height: 100%;
                    background-color: #ffffff;
                    display: block;
                    object-fit: fill;
                }
            }

            .info {
                margin-left: 8px;

                .tag {
                    display: inline-block;
                    background-color: #D82D11;
                    color: #ffffff;
                    font-size: 12px;
                    height: 20px;
                    line-height: 20px;
                    padding: 0 8px;
                    border-radius: 4px;
                    margin-right: 3px;
                }

                .title {
                    font-weight: bold;
                    line-height: 1.5;
                    height: 36px;
                    display: inline-block;
                    overflow: hidden;
                }

                .reward {
                    color: #D82D11;
                    font-size: 12px;
                    margin-top: 5px;
                    transform: scale(.8);
                    margin-left: -6px;
                }

                .price {
                    margin-top: 5px;
                    color: #D82D11;

                    .icon {
                        display: inline-block;
                        font-size: 12px;
                        transform: scale(.8);
                        margin-left: -2px;
                    }

                    .num {
                        font-weight: bold;
                    }
                }

                .sale {
                    color: #cccccc;
                    font-size: 12px;
                    object-fit: scale-down;
                    transform: scale(.8);
                    margin-left: -8px;
                }
            }
        }
    }
</style>